<template>
  <div class="vehicle">
    <div class="text">
      <span class="title">宠物管理</span>
      <span> 用于管理小区里的宠物信息，包括业主、家庭成员及租户饲养的宠物</span>
    </div>
    <el-card class="search-card" style="position: relative">
      <!-- 搜索 -->
      <el-form :inline="true" :class="flag ? 'externalDiv' : ''">
        <div ref="insideDiv">
          <el-form-item style="float: right; margin-right: 30px">
            <el-button size="small" @click="resect()"> 重置 </el-button>
            <el-button type="primary" size="small" @click="serachData()">
              查询
            </el-button>
          </el-form-item>
          <el-form-item label="宠物名称">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="小区名称">
            <el-select
              v-model="form.community_code"
              placeholder="请输入"
              @change="selectSearch"
            >
              <el-option
                v-for="item in CommunityList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="栋数">
            <el-select v-model="form.building_code" placeholder="请输入">
              <el-option
                v-for="item in BuildingList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="收养时间">
            <el-date-picker
              v-model="form.adopt_time"
              type="daterange"
              start-placeholder="请选择"
              end-placeholder="请选择"
              :default-time="['12:00:00']"
            />
          </el-form-item>
        </div>
      </el-form>
      <span
        v-if="width > 60 && flag"
        class="open"
        @click="flag = !flag"
      >展开
        <i class="el-icon-arrow-down" />
      </span>
      <span v-if="width > 60 && !flag" class="hide" @click="flag = !flag">
        收起
        <i class="el-icon-arrow-up" />
      </span>
    </el-card>
    <el-card class="box-card">
      <!-- 按钮 -->
      <div class="middle">
        <div class="middle-right">
          <el-button type="primary" size="small" @click="drawer = true">
            新增宠物
          </el-button>
        </div>
      </div>

      <!-- 表格 -->
      <template>
        <el-table :data="petData">
          <el-table-column prop="name" label="宠物名称" />
          <el-table-column prop="color" label="宠物颜色" />
          <el-table-column prop="photo" label="宠物照片">
            <template #default="{ row }">
              <el-image
                style="width: 100px; height: 100px"
                :src="splitStr('http://124.223.14.236:8881' + row.photo)[0]"
                :preview-src-list="
                  splitStr('http://124.223.14.236:8881' + row.photo)
                "
              />
            </template>
          </el-table-column>
          <el-table-column prop="community.name" label="小区名称" />
          <el-table-column prop="building.name" label="栋数" />
          <el-table-column prop="" label="主人姓名">未知 </el-table-column>
          <el-table-column prop="" label="联系方式">未知 </el-table-column>
          <el-table-column prop="" label="描述">
            <template #default="{ row }">
              {{ row.remark === "" ? "-" : row.remark }}
            </template>
          </el-table-column>
          <el-table-column prop="adopt_time" label="收养时间">
            <template #default="{ row }">
              {{ formatetimeOfEntry(row.adopt_time) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" class="cell">
            <template #default="{ row }">
              <el-button type="text" @click="editEchoDate(row.id)">
                编辑
              </el-button>
              <el-button type="text" @click="delListId(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="form.current"
          :page-sizes="[10, 20, 30]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </el-card>
    <AddPet ref="addDialog" :drawer.sync="drawer" />
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { delPetListApi, petPagingListApi } from '@/api/owners/pet'
import AddPet from './components/add-pet.vue'
import { getCommunityListApi, showBuildingApi } from '@/api/owners/member'
export default {
  name: 'PetOwners',
  components: {
    AddPet
  },
  data() {
    return {
      drawer: false,
      petData: [],
      serachList: [],
      count: 0,
      form: {
        current: 1,
        pageSize: 10,
        name: '',
        community_code: '',
        building_code: '',
        adopt_time: []
      },
      CommunityList: [],
      BuildingList: [],
      width: 0, // 记录一行数据有多高
      flag: true // 展示样式
    }
  },
  created() {
    this.petPagingList()
    this.getCommunityList()
  },
  mounted() {
    // console.log(this.$refs.insideDiv.clientHeight);
    this.$nextTick(() => {
      this.width = this.$refs.insideDiv.clientHeight
    })
    window.onresize = () =>
      (() => {
        this.width = this.$refs.insideDiv.clientHeight // 放大或者缩小, 对应的更多、收起是否显示
      })()
  },
  methods: {
    async serachData() {
      if (this.form.adopt_time) {
        this.form.adopt_time = this.form.adopt_time
          .map((item) => {
            return +new Date(item)
          })
          .join(',')
      }
      const { data } = await petPagingListApi(this.form)
      this.petData = data.rows
      this.count = data.count
    },

    //! 二级联动
    async selectSearch() {
      const { data } = await showBuildingApi(this.form)
      this.BuildingList = data.rows
    },
    //! 重置
    resect() {
      this.form = {
        current: 1,
        pageSize: 20,
        name: '',
        community_code: '',
        building_code: '',
        adopt_time: []
      }
      this.petPagingList()
    },
    // !回显
    editEchoDate(id) {
      this.drawer = true
      this.$refs.addDialog.editechoDate(id)
    },
    // !删除
    delListId(id) {
      this.$confirm('确认删除吗？', '提示')
        .then(async() => {
          await delPetListApi(id)
          this.$message.success('删除成功')
          this.petPagingList()
        })
        .catch((error) => {
          return console.log(error)
        })
    },
    // !渲染列表
    async petPagingList() {
      const { data } = await petPagingListApi(this.form)
      this.petData = data.rows
      this.count = data.count // 总数据数
      // this.form = data.rows;
    },
    //! 渲染小区下拉
    async getCommunityList() {
      const { data } = await getCommunityListApi(
        this.form.current,
        this.form.pageSize
      )
      this.CommunityList = data.rows
    },
    // !分页
    handleSizeChange(val) {
      this.form.pageSize = val
      this.form.current = 1
      this.petPagingList()
    },
    handleCurrentChange(val) {
      this.form.current = val
      this.petPagingList()
    },
    // 日期格式化
    formatetimeOfEntry(value) {
      return value ? dayjs(value).format('YYYY-MM-DD HH:MM:ss') : ''
    },
    // 图片数据处理
    splitStr(str) {
      return str.split(',')
    }
  }
}
</script>
<style lang="scss" scoped>
.vehicle {
  padding: 40px;
  .externalDiv {
    height: 59px;
    overflow: hidden;
  }
  .text {
    margin-bottom: 10px;
    .title {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .middle {
    text-align: right;
    margin-bottom: 15px;
  }
  .search-card {
    margin-bottom: 20px;
    .open {
      position: absolute;
      right: 6px;
      top: 3px;
      cursor: pointer;
      height: 50px;
      color: #1770ff;
      font-size: 10px;
      line-height: 50px;
    }
    .hide {
      position: absolute;
      bottom: 10px;
      cursor: pointer;
      right: 6px;
      color: #1770ff;
      font-size: 10px;
    }
  }
  .el-form-item {
    margin-right: 22px;

    ::v-deep .el-input__inner {
      height: 35px;
      line-height: 35px;
      width: 200px;
    }
  }
  .avater {
    width: 58px;
    height: 58px;
  }
  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }
}
</style>
